@import "variables";

section.menu-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-right: 1px solid @divider-color;

  &:not(.menu-extended) {
    .brand-content {
      .icon-fold {
        position: absolute;
        left: 82px;

        i {
          padding: 5px 0;
          transform: rotate(180deg);
        }
      }
    }

    .menu-item-title {
      display: none;
    }

    ::ng-deep .ant-menu-submenu-title span:nth-child(2) {
      display: none;
    }
  }

  &.menu-extended {
    .brand-content {
      .icon-fold {
        left: 200px;
      }
    }

    ::ng-deep .ant-menu-submenu-title span:nth-child(2) {
      color: #4f5867;
    }
  }

  .menu-item-line {
    height: 12px;
    margin: 0 20px;
    display: flex;
    align-items: center;

    .line {
      flex: 1;
      height: 1px;
      background-color: @divider-color;
      border-radius: 2px;
    }
  }

  .brand {
    width: 251px;
    padding: 18px 10px 10px 7px;

    .brand-content {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      background: #FFFFFF;

      .brand-logo {

        display: flex;

        .logo {
          width: 45px;
          height: 45px;
          margin-left: 15px;
          margin-top: 2px;
        }

        .brand {
          width: 100px;
          height: 88px;
          padding: 0 10px 0 10px;
          margin-top: -19px;
        }
      }

      .icon-fold {
        transition: left 500ms;
        line-height: 25px;
        background-color: #ffffff;
        margin-top: -15px;

        i {
          font-size: 20px;
          color: @grey30-color;
        }
      }
    }
  }

  .menu-list {
    width: 251px;
    height: calc(100% - 124px);
    overflow-y: auto;
    overflow-x: hidden;

    /** override default menu item selected behavior **/

    .ant-menu-vertical .ant-menu-item::after,
    .ant-menu-vertical-left .ant-menu-item::after,
    .ant-menu-vertical-right .ant-menu-item::after,
    .ant-menu-inline .ant-menu-item::after {
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      bottom: 0;
      content: '';
      z-index: -1;
    }

    .ant-menu-inline .ant-menu-selected::before,
    .ant-menu-inline .ant-menu-item-selected::before {
      transform: scaleY(1);
      opacity: 1;
      border-left: 4px solid @primary-color;
      border-top: 4px solid transparent;
      border-bottom: 4px solid transparent;
      transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
    }

    .ant-menu-vertical .ant-menu-item::before,
    .ant-menu-vertical-left .ant-menu-item::before,
    .ant-menu-vertical-right .ant-menu-item::before,
    .ant-menu-inline .ant-menu-item::before {
      position: absolute;
      // top: 10px;
      top: 9px;
      left: 0;
      bottom: 0;
      content: '';
      height: 32px;
      width: 4px;
    }

    /** override default menu behavior **/

    .ant-menu-item {
      // height: 52px;
      height: 50px;
      width: 100%;
      cursor: pointer;
      display: flex;
      align-items: center;
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 150%;
      color: @grey60-color;

      &:hover {
        color: @primary-color;
      }

      &.ant-menu-item-selected {
        font-weight: 500;
        background-color: white;

        a,
        span {
          color: @primary-color;
        }
      }
    }

    li {
      a {
        display: flex;
        flex-direction: row;
        align-items: center;
        color: @grey50-color;

        span {
          font-size: 14px;
          line-height: 150%;
          margin: 0 20px;

          color: @grey60-color;
        }

        i {
          font-size: 20px;
        }
      }

      &:hover {
        background: @grey5-color;
      }
    }
  }

  button {
    width: 100%;
    height: 52px;
    font-size: 14px;
    line-height: 150%;
    text-align: left;
    padding: 0 16px 0 14px;

    &:hover {
      border-radius: 8px;
      background-color: @grey5-color;
    }

    i {
      font-size: 20px;
      margin-right: 20px;
    }
  }

  .organization-management {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 64.5px;
    padding: 0 16px;

    .icon-text-btn {
      display: flex;
      align-items: center;

      i {
        color: @grey50-color;
      }

      span {
        color: @grey60-color;
      }
    }
  }
}

ul.user-item {
  margin-left: 2px;
  width: 210px;
  border-radius: 12px;
}

.dropdown-menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: white;
  align-items: center;
  padding: 12px 24px;
  box-shadow: 0 4px 12px rgba(217, 217, 217, 0.5);
  border-radius: 12px;
  width: 218px;
  height: 260px;
  color: @grey60-color;

  .centered {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  li {
    width: 100%;
    height: 52px;
    color: @grey60-color;
    font-size: 14px;
    line-height: 150%;

    .menu-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 16px;

      i {
        font-size: 20px;
        color: @grey40-color;
      }
    }

    &:hover {
      border-radius: 8px;
    }
  }

  .line-container {
    height: 12px;
    width: 95%;

    &.bottom {
      margin-top: 8px;
    }

    .line {
      display: block;
      height: 1px;
      border-radius: 2px;
      background-color: @grey20-color;
    }
  }
}

.ant-dropdown-menu-item {
  &:hover {
    background-color: @grey5-color;
  }
}

.switch-env {
  .ant-table-row {
    .action-col {
      text-align: right;
    }
  }

  .ant-table-thead>tr.ant-table-row-hover:not(.ant-table-expanded-row)>td,
  .ant-table-tbody>tr.ant-table-row-hover:not(.ant-table-expanded-row)>td,
  .ant-table-thead>tr:hover:not(.ant-table-expanded-row)>td,
  .ant-table-tbody>tr:hover:not(.ant-table-expanded-row)>td {
    background-color: #ffffff;
    color: #000000;
  }

  .ant-table-row.active {
    background-color: #ffffff;
    color: #000000;
  }

  .ant-table-tbody>tr .ant-table-expanded-row-fixed {
    width: 100% !important;
  }

  .ant-table-tbody>tr.ant-table-placeholder {
    display: none;
  }
}

::ng-deep .ant-menu-submenu.ant-menu-submenu-placement-right {
  left: -155px;

  .ant-menu {
    border-radius: 12px;

    .ant-menu-item-selected {
      font-weight: 500;
      background-color: white;
    }

    .ant-menu-item:hover {
      background: @grey5-color;
    }
  }
}
